/*
--------------------------------------------------
备注: 混合，提供公共样式；
--------------------------------------------------
*/
@import "_varibles.scss";

// “.t”或“.s”——排版类(Typography); t1 - 最大的字体大小; .s1 - 第一字体大小较小的基本字体大小。
@mixin t1 {
  font-size: $font-size-large;
  line-height: 1.25
}
@mixin t2 {
  font-size: $font-size-middle;
  line-height: 1.25
}
@mixin t3 {
  font-size: $font-size-normal;
  line-height: 1.25
}
@mixin t4 {
  font-size: $font-size-small;
  line-height: 1.25
}

@mixin s1 {
  font-size: $font-size-large - 1px;
  line-height: 1.25
}
@mixin s2 {
  font-size: $font-size-middle - 1px;
  line-height: 1.25
}
@mixin s3 {
  font-size: $font-size-normal - 1px;
  line-height: 1.25
}
@mixin s4 {
  font-size: $font-size-small - 1px;
  line-height: 1.25
}
// 按钮
@mixin button-theme($color: '', $background: '', $border: '') {
  padding: 12px 20px;
  color: $white-color;
  background: $background;
  border: 1px solid $border;

  &:hover {
    background: mix($white-color, $background, 20%);
    border: 1px solid mix($white-color, $border, 20%);
  }
  &:active {
    background: mix($white-color, $background, 10%);
    border: 1px solid mix($white-color, $border, 10%);
  }

  &.isplain {
    color: $color;
    background: mix($white-color, $background, 80%);
    border: 1px solid mix($white-color, $border, 60%);

    &:hover{
      color: $white-color;
      background: mix($white-color, $background, 20%);
    }

    &:active {
      color: $white-color;
      background: mix($white-color, $background, 10%);
      border: 1px solid mix($white-color, $border, 10%);
    }
  }
  &.isround {
    border-radius: 20px;
  }
  &.iscircle {
    border-radius: 50%;
    padding: 12px 12px;
  }

  &.disabled {
    cursor: not-allowed;
    opacity: .6;

    &:hover,
    &.isplain{
      color: $white-color;
      background: $background;
      border: 1px solid $border;
    }
  }
  &.isloading:not([class*='isplain']){
    cursor: auto;
    opacity: .6;
    
    &:hover{
      color: $white-color;
      background: $background;
      border: 1px solid mix($white-color, $border, 20%);
    }
  }

  &.isloading[class*='isplain']{
    cursor: auto;
    opacity: .6;

    &:hover{
      color: $color;
      background: mix($white-color, $background, 80%);
      border: 1px solid mix($white-color, $border, 60%);
    }
  }

  &.ismedium{
    padding: 9px 17px;
  }
  &.issmall{
    padding: 6px 14px;
  }
  &.ismini{
    padding: 4px 12px;
  }
}

// 清除浮动
@mixin clearFloat {
  &::after,
  &::before{
    content: '';
    display:table;
    clear:both;
  }
}